<template>
  <div class="view-container">

    <div class="main-content">

      <div class="list-container">
        <el-tabs
          v-model="activeName"
          style="width:100%"
          @tab-click="handleClick"
        >
          <el-row :gutter="40">
            <el-col>
              <formNavi
                :is-cycle="boole"
                @change="change"
              />
            </el-col>
            <el-col>
              <el-form>
                <el-form-item label="总订单金额">
                  <span style="color: rgba(249, 153, 18, 1)">{{ money }}</span>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-tab-pane
            label="按时间周期统计"
            name="time"
          />
          <el-tab-pane
            label="按产品统计"
            name="product"
          />
          <el-tab-pane
            label="按配送商统计"
            name="distributors"
          />
        </el-tabs>
      </div>

      <!--tabs信息-->
      <component
        :is="componentTabs"
        ref="componentTabs"
        :table-data="tableData"
      />

    </div>
  </div>

</template>

<script>
import {computed, defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Index',
  components: {
    time: defineAsyncComponent(() => import('./modules/time.vue')),
    product: defineAsyncComponent(() => import('./modules/product.vue')),
    distributors: defineAsyncComponent(() =>
      import('./modules/distributors.vue')
    ),
    formNavi: defineAsyncComponent(() => import('./modules/form.vue')),
  },
  setup(props, context) {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()

    var data = reactive({
      activeName: route.query.tab || 'time',
      componentTabs: null,
      queryParams: {
        statisticsType: 1, // 1 按时间周期统计2 产品 3 配送商
        charge: '1', // 1 我负责 2 我下级 3 我部门
        cycle: '1', //
        start: null, //
        end: null, // 非必须
        productId: 0, // 产品id
        productLine: 0, // 产品线id
        distributeId: 0, // 配送商id
      },
      money: '',
      tableData: [],
      boole: true,
    })

    const change = (val) => {
      data.queryParams = val
      switch (data.activeName) {
        case 'time':
          data.queryParams.statisticsType = 1
          break
        case 'product':
          data.queryParams.statisticsType = 2
          break
        case 'distributors':
          data.queryParams.statisticsType = 3
          break
      }
      handlList()
    }

    const handlList = async() => {
      const res = await api.developCustomer.AMOUNT(data.queryParams)
      if (res.code === 0) {
        data.money = res.data
      }
      const ress = await api.developCustomer.ORDERSTATISTICS_LIST(
        data.queryParams
      )
      if (ress.code === 0) {
        data.tableData = ress.data.list
      }
    }

    // 切换tabs
    const handleClick = (tab, event) => {
      if (data.activeName === 'time') {
        data.queryParams.statisticsType = 1
        data.boole = true
        handlList()
      }
      if (data.activeName === 'product') {
        data.queryParams.statisticsType = 2
        data.boole = false
        handlList()
      }
      if (data.activeName === 'distributors') {
        data.queryParams.statisticsType = 3
        data.boole = false
        handlList()
      }

      // data.activeName = tab.props.name
    }

    // 加载动态组件
    const componentTabs = computed(() => {
      return data.activeName
    })

    onMounted(() => {
      handlList()
    })

    return {
      ...toRefs(data),
      componentTabs,
      handleClick,
      handlList,
      change,
    }
  },
}
</script>

<style scoped>
</style>
